import { Iframe, Obj, Toast } from 'esy-ui';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { postActivityDetail } from '@/services';
import { useGlobalStore } from '@/mobx';
import { Header } from '@/components';

function Detail() {
  const params = useParams();
  const { changeState } = useGlobalStore();
  const id = params?.id;
  const [data, setData] = useState<Obj>({});

  useEffect(() => {
    changeState('isLoading', true);
    if (id) {
      postActivityDetail({ AID: id })
        .then((res: any) => {
          setData(res?.Data);
        })
        .catch(() => {
          changeState('isLoading', false);
        });
    }
  }, [changeState, id]);

  const onLoad = () => {
    console.info('加载成功');
    changeState('isLoading', false);
  };

  const onError = () => {
    if (data?.ContentUrl) {
      console.info('加载失败');
      changeState('isLoading', false);
      Toast.show({ content: 'failed' });
    }
  };

  return (
    <div className='relative h-full bg-body flex flex-col flex-1'>
      <Header title={data?.Title} />
      <Iframe id='game-page' className='w-full flex-1' src={data?.ContentUrl} onLoad={onLoad} onError={onError} />
    </div>
  );
}
export default Detail;
